<template>
	<view class="pages">
		<image :src="info.imageUrl" class="goods-img"></image>
		<!-- <view class="title">{{info.goodsName}}</view> -->
		<view class="price">
			<!-- <view><span>¥</span>{{info.nowPrice}}</view> -->
			
			<view class="time" v-if="info.state == 3">
				预约中
			</view>
			<view class="time" v-if="info.state == 1">
				抢购中
			</view>
			<view class="time" v-if="info.state == 2">
				已结束
			</view>
			<!-- 还没到预约时间 -->
			<view class="time" v-if="info.state == 0 ">
				{{nowTimeStamp < info.appointTimestamp?'距离预约：':nowTimeStamp > info.appointEndTimestamp?'距离抢购：':''}}
				<view class="time-content">
					<view>{{time.slice(0, 2)}}</view>
					<view>{{time.slice(3, 5)}}</view>
					<view>{{time.slice(6, 8)}}</view>
				</view>
			</view>
			
		</view>
		
		<!-- <view class="procss"></view>
		<view class="detail-title">拍品详情</view>
		
		<view class="detail-item">
			<view>专场名称</view>
			<view>{{info.goodsName}}</view>
		</view>
		<view class="detail-item">
			<view>数量</view>
			<view>{{info.quantity}}</view>
		</view>
		<view class="detail-item">
			<view>起始价</view>
			<view>{{info.startPrice}}</view>
		</view>
		<view class="detail-item">
			<view>余数</view>
			<view>{{info.percent}}%</view>
		</view>
		<view class="detail-item">
			<view>提货价</view>
			<view>{{info.endPrice}}</view>
		</view>
		<view class="detail-item">
			<view>市场价</view>
			<view>{{info.price}}</view>
		</view>
		<view class="detail-item">
			<view>最新成交日期</view>
			<view>{{info.lastDate}}</view>
		</view>
		<view class="detail-item">
			<view>最新成交价格</view>
			<view>{{info.lastPrice}}</view>
		</view> -->
		<!-- 规格 -->
		<view class="specifications-content">
			<!-- <view class="title">规格</view>
			<view >已选：玉见铃兰花手链（0.85g）</view> -->
		</view>
		<!-- <view class="changes">共2种规格可选</view> -->
		
		<view class="procss"></view>
		<view class="detail-title">商品介绍</view>
		<view style="margin:20rpx 0 0 30rpx;width:690rpx;" v-html="html"></view>
		<view class="bottom" v-if="isVip != 1">
			<view class="yy" :class="info.state != 3?'none':''" @tap="clickYy">一键预约</view>
			<view class="submit" :class="info.state != 1?'none':''" @tap="clickBuy">立即抢购</view>
		</view>
		
		<view class="bottom" v-else>
			<view class="yy" @tap="clickYy" style="opacity: 0;">一键预约</view>
			<view class="submit" @tap="clickBuy">立即购买</view>
		</view>
		<!-- 规格弹窗 -->
		<view class="prop-content" v-if="isShowProp">
			<view class="prop">
				<image src="../../static/index/close.png" class="close-img" @tap="isShowProp = false"></image>
				
				<view class="goods-content">
					<image :src="info.imageUrl" class="goods-img"></image>
					<view class="goods-info">
						<view class="titles">{{info.goodsName}}</view>
						<!-- <view class="prices">¥{{bugPrice}}</view> -->
						<view class="goods-num">
							<view>抢购数量：</view>
							<view class="num-content">
								<image src="../../static/index/reduce.png" class="num-imgs" @tap="reduce"></image>
							    <view class="num">{{num}}</view>
								<image src="../../static/index/add.png" class="num-imgs" @tap="add"></image>
							</view>
						</view>
					</view>
				</view>
				
				<view class="spec">规格</view>
				<view class="list">
				    <!-- <view class="item">玉见铃兰花手链（0.85g）</view> -->
				</view>
				<view class="submit" @tap="goUrl">{{isVip == 1?'立即购买':'立即抢购'}}</view>
			</view>
		</view>
		
		<!-- 购买易货商品输入密码弹窗 -->
		<view class="props" v-if="isProp">
			<view class="buyProp">
				<image src="../../static/recharge/close.png" class="closeImg" @tap="closeProp"></image>
				<view class="title">确认预约</view>
				<view class="numTitle">支付方式</view>
				
				<view class="prop-type">
					
					<view class="prop-type-item" v-for="(item,index) in walletType" :key="index" @tap="changeWalletType(item)">
						<image :src="walletId == item.id?'../../static/recharge/selectIcon.png':'../../static/recharge/icon.png'" class="radioImg"></image>
						{{item.title}}
					</view>
					
				</view>
				
			    <view class="numTitle">支付密码</view>
			    <input placeholder="请输入支付密码" class="input-prop" password" placeholder-class="placeholder" type="number" v-model="payPassword"/>
				<view class="sures" @tap="sure">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { goodsDetail,buyGoods,getVoucherGoods,appointment,addressList } from '../../api/api.js'
	export default {
		data() {
			return {
				isShowProp:false,
				goodsId:'',
				info:'',
				num:1,
				html:'',
				time:'',  // 倒计时
				timestamp:'',  // 时间戳
				interval:'',
				isVoucher:''  ,// 是否是多多券商品
				bugPrice:0,   
				addressList:[],
				addressId:'',
				nowTimeStamp:Date.now(),    // 当前的时间戳
				isProp:false,
				payPassword:'',
				isVip:0,         // 是否是会员礼包商品 1 是 0 不是
				payType:'',
				walletId:1,
				walletType:[
					{id:1,title:'多多券'},
					{id:2,title:'快乐豆'},
				],
			}
		},
		onLoad(e) {
			this.goodsId = e.goodsId
			this.timestamp = e.timestamp
			this.isVoucher = e.isVoucher
			this.isVip = e.isVip
			if( this.isVip == 1) {
				this.payType = 4
			}else {
				this.payType = 1
			}
			// 获取商品详情
			this.getDetail()
			// 获取地址列表
			this.getAddressList()
			clearInterval(this.interval)
		},
		onUnload() {
			clearInterval(this.interval)
		},
		onHide() {
			// 清除所有计时器
			clearInterval(this.interval)
		},
		methods: {
			changeWalletType(item) {
				this.walletId = item.id
			},
			goUrl() {
				var orderInfo = {
					goodsImg:this.info.imageUrl,
					goodsId:this.info.goodsId,
					goodsTitle:this.info.goodsName,
					goodsPrice:this.info.nowPrice,
					goodsNum:this.num,
				}
				var orderInfo = JSON.stringify(orderInfo)
				uni.navigateTo({
					url:'../goods/submitOrder?orderInfo=' + orderInfo + '&payType=' + this.payType + '&isVip=' + this.isVip
				})
			},
			
			// 获取商品详情
			getDetail() {
				let data = {
					goodsId:this.goodsId,
					type:this.isVip == 1?2:null
				}
				goodsDetail(data).then( res=> {
					this.info = res.data
					this.bugPrice = this.info.nowPrice
					var regex = new RegExp('<img ', 'gi')
					this.html = this.info.detail.replace(regex, '<img style="width: 100%;" ');
					var that = this
					that.interval = setInterval(function(){
						// 还没到预约时间
						if( that.info.state == 0 && (that.nowTimeStamp < that.info.appointTimestamp) ){
							that.time = that.countDown(Number(that.info.appointTimestamp))
						}else if( that.info.state == 0 && (that.nowTimeStamp > that.info.appointEndTimestamp) ) {
							that.time = that.countDown(Number(that.info.nextTimestamp))
						}
						
					},1000)
					
				})
			},
			
			// 获取地址列表
			getAddressList() {
				let data = {}
				addressList(data).then( res=> {
					this.addressList = res.data
					// 如果没有添加地址,提示去添加
					if ( this.addressList.length == 0 ) {
						this.addresssInfo = ''
					}else if( this.addressList.length == 1 ) {
						// 如果只有一个地址,直接显示为默认
						this.addresssInfo = this.addressList[0]
						this.addressId = this.addressList[0].id
					}else if( this.addressList.length > 1 ){
						// 如果存在多个地址,先判断是否有默认地址
						let isHaveDefault = this.addressList.some( item => item.isDefault == 1)
						// 如果有,查询默认地址
						if( isHaveDefault ) {
							this.addressList.forEach( item => {
								if( item.isDefault == 1 ) {
									this.addresssInfo = item
									this.addressId = item.id
								}
							})
						}else {
							// 如果没有,默认第一条地址
							this.addresssInfo = this.addressList[0]
							this.addressId = this.addressList[0].id
						}
					}
				})
			},
			
			closeProp() {
				this.isProp = false
				this.payPassword = ''
			},
			
			// 点击预约
			clickYy() {
				if( this.info.state != 3 ) {
					return
				}
				if( this.addressList.length == 0 ) {
					uni.showToast({
						title:'请先添加默认地址',
						icon:'none'
					})
					return
				}
				this.isProp = true
				
			},
			
			sure() {
				let data = {
					goodsId:this.goodsId,
					addressId:this.addressId,
					walletType:this.walletId,
					payPassword:this.payPassword
				}
				appointment(data).then( res=> {
					uni.showToast({
						title:'预约成功',
						icon:'none'
					})
					this.isProp = false
				})
			},
			
			// 点击抢购
			clickBuy() {
				if( this.info.state != 1 && this.isVip != 1 ) {
					return
				}
				this.isShowProp = true
			},
			
			reduce() {
				if( this.num == 1 ) {
					return
				}
				this.num--
				this.bugPrice = (Number(this.info.nowPrice) * Number(this.num)).toFixed(2)
			},
			
			add() {
				if( this.isVip == 1 ) {
					uni.showToast({
						title:'会员礼包单次只能购买一个',
						icon:'none'
					})
					return
				}
				this.num++
				this.bugPrice = (Number(this.info.nowPrice) * Number(this.num)).toFixed(2)
			}
		}
	}
</script>

<style lang="less">
    .pages {
		padding-bottom: 200rpx;
		.goods-img {
			width: 750rpx;
			height: 750rpx;
		}
		.title {
			margin: 24rpx 0 12rpx 30rpx;
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
		}
		.price {
			width: 690rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 40rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #d80202;
			span {
				font-size: 24rpx
			}
			.time {
				display: flex;
				align-items: center;
				color:#FE3B33;
				font-size: 28rpx;
				.time-content {
					display: flex;
					align-items: center;
					view {
						margin-left: 15rpx;
						text-align: center;
						line-height: 52rpx;
						width: 52rpx;
						height: 52rpx;
						background: #FE3B33;
						border-radius: 10rpx;
						opacity: 0.84;
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						color: #FFFFFF;
					}
				}
			}
		}
		.detail-item {
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #808080;
			margin-top: 30rpx;
			width: 690rpx;
			display: flex;
			justify-content: space-between;
		}
		// 规格
		.specifications-content {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #1A1A1A;
			.title {
				margin: 0 40rpx 0 30rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #808080;
			}
		}
		.changes {
			margin: 12rpx 0 0 120rpx;
			text-align: center;
			width: 200rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: #F2F2F2;
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #808080;
		}
		.procss {
			margin-top: 30rpx;
			width: 750rpx;
			height: 10rpx;
			background: #F5F5F5;
		}
		.detail-title {
			margin: 40rpx 0 0 30rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			line-height: 50rpx;
		}
		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			width: 690rpx;
			padding:0 30rpx;
			height: 150rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 2rpx 0rpx rgba(0,0,0,0.08);
			.yy {
				text-align: center;
				line-height: 90rpx;
				width: 320rpx;
				height: 90rpx;
				color: #FE3B33;
				border: 1rpx solid #FE3B33;
				box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.16);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
			}
			.submit {
				text-align: center;
				line-height: 90rpx;
				width: 320rpx;
				height: 90rpx;
				background: #FE3B33;
				box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.16);
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
			.none {
				background: #a1a1a1;
				border: none;
				color: #fff;
			}
		}
		// 规格弹窗
		.prop-content {
			background-color: rgba(26, 26, 26, 0.4500);
			position: fixed;
			width: 100%;
			height: 100%;
			bottom: 0;
			.prop {
				padding-bottom: 40rpx;
				position: absolute;
				bottom: 0;
				width: 750rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				.close-img {
					position: absolute;
					top: 43rpx;
					right: 41rpx;
					width: 28rpx;
					height: 28rpx;
				}
				.goods-content {
					margin: 111rpx 0 0 38rpx;
					display: flex;
					align-items: center;
					.goods-img {
						margin-right: 20rpx;
						width: 180rpx;
						height: 180rpx;
					}
					.goods-info {
						.titles {
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #1A1A1A;
							line-height: 45rpx;
						}
						.prices {
							margin-top: 10rpx;
							font-size: 36rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #CA0000;
							line-height: 50rpx;
						}
						.goods-num {
							width: 450rpx;
							margin-top: 21rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #808080;
							.num-content {
								display: flex;
								align-items: center;
								.num-imgs {
									width: 46rpx;
									height: 46rpx;
								}
								.num {
									margin: 0 36rpx;
									font-size: 32rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: #1A1A1A;
								}
							}
						}
					}
				}
				
				.spec {
					margin: 30rpx 0 0 38rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1A1A1A;
				}
				.list {
					margin:20rpx 0 100rpx 40rpx;
					width: 690rpx;
					display: flex;
					flex-wrap: wrap;
					.item {
						margin-right: 30rpx;
						margin-bottom: 20rpx;
						padding: 9rpx 20rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #808080;
						background: #F2F2F2;
						border-radius: 4rpx;
					}
					.active {
						border: 1px solid #FE3B33;
						color: rgba(23, 119, 255, 1);
					}
				}
				.submit {
					text-align: center;
					margin-left: 40rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					width: 670rpx;
					height: 90rpx;
					line-height: 90rpx;
					background: #FE3B33;
					box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0,0,0,0.16);
					border-radius: 40rpx;
				}
			}
		}
		
		.props {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(26, 26, 26, 0.45);
			.buyProp {
				padding-bottom: 40rpx;
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				width: 560rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				.closeImg {
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					top: 37rpx;
					right: 25rpx;
				}
				
				.title {
					margin-top: 38rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 42rpx;
				}
				.numTitle {
					margin-top: 46rpx;
					width: 470rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 37rpx;
				}
				.prop-type {
					margin-top: 24rpx;
					width: 470rpx;
					display: flex;
					align-items: center;
					
					.prop-type-item {
						display: flex;
						align-items: center;
						margin-right: 10rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
						.radioImg {
							width: 36rpx;
							height: 36rpx;
							margin-right: 20rpx;
						}
					}
					
				}
				.input-prop {
					margin-top: 12rpx;
					height: 88rpx;
					width: 470rpx;
					border-bottom:1rpx solid #F2F2F2 ;
				}
				.placeholder {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #808080;
					line-height: 33rpx;
				}
				.sures {
					margin-top: 60rpx;
					text-align: center;
					line-height: 86rpx;
					width: 470rpx;
					height: 86rpx;
					background: #FE3B33;
					border-radius: 4rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				.codes {
					position: absolute;
					right: 43rpx;
					bottom: 210rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FE3B33;
					line-height: 33rpx;
				}
			}
		}
	}
</style>
